<template>
  <div class="" style="width:100%; overflow-y: auto; height: 100%">
    <FoldCard v-for="(item, i) in style" :cardName="item.name" :key="i">
      <template slot="cardBody">
        <div v-for="(c, j) in item.children" class="row item" :key="j">
          <div :class="['col-3', 'title', c.type=='split' ? 'black' : '']">{{c.text}}</div>
          <div class="col-9" style="vertical-align: middle">
            <!--分割线-->
            <div v-if="c.type==='split'" class="split"></div>
            <!--文本框-->
            <input v-if="c.type==='text'" v-model="c.parent[c.name]" type="text" class="form-control W100 txt" @click="test" />
            <!--数值框-->
            <input v-if="c.type==='value'" v-model="c.parent[c.name]" type="number" min="0" class="form-control W100 txt" />
            <!--标签选项-->
            <UIOption v-if="c.type==='option'" @childChange="handleChange(c, $event)" :node="c"></UIOption>
            <!--滑动选择-->
            <!-- <mt-range v-if="c.type==='range'" v-model="c.parent[c.name]" :min="c.options[0]" :max="c.options[1]"
                      :step="c.options[2]" :bar-height="2">
              <div slot="start">{{c.parent[c.name]}} </div>
              <div slot="end"> {{c.options[1]}}{{c.options[3]}}</div>
            </mt-range> -->
            <mu-slider v-if="c.type==='range'" v-model="c.parent[c.name]" :min="c.options[0]" :max="c.options[1]"
                       :step="c.options[2]"></mu-slider>
            <!--滑动选择-->
            <mu-slider v-if="c.type==='range2'" v-model="c.parent[c.name]" :min="c.options[0]" :max="c.options[1]"
                       :step="c.options[2]"></mu-slider>
            <!--颜色选择器-->
            <UIColor v-if="c.type==='color'" v-model="c.parent[c.name]"
                     @childChange="handleChange(c, $event)"></UIColor>
            <!--下拉列表-->
            <select v-if="c.type==='select'" v-model="c.parent[c.name]" class="form-control select">
              <option v-for="ft in c.options" :key='ft'>{{ft}}</option>
            </select>
            <!--坐标轴上下限-->
            <UILimit v-if="c.type==='limit'" v-model="c.parent[c.name]" :limit="c.name"
                     @childChange="handleChange(c, $event)"></UILimit>
            <!--二值切换-->
            <mu-switch v-if="c.type==='bool'" v-model="c.parent[c.name]"></mu-switch>
            <!--数组选项-->
            <UIArraySelect v-if="c.type==='arraySel'" v-model="c.parent[c.name]" :node="c"
                           @childChange="handleChange(c, $event)"></UIArraySelect>
            <!--数组数值-->
            <UIArrayValue v-if="c.type==='arrayVal' || c.type==='arrayText'" :uiType="c.type"
                          v-model="c.parent[c.name]" :node="c" ></UIArrayValue>
            <!--数值·滑动 + 文本框-->
            <UIValue v-if="c.type==='rangeValue'" v-model="c.parent[c.name]"
                     @childChange="handleChange(c, $event)"></UIValue>

          </div>
        </div>
      </template>
    </FoldCard>
  </div>
</template>

<script>
import Vue from 'vue';
// import colorPicker from '../plugin/vue-color-picker';
// 注册插件
// Vue.use(colorPicker);
// import { Sketch } from 'vue-color'
import FoldCard from './FoldCard';
import UIOption from './UIOption';
import UILimit from './UILimit';
import UIArraySelect from './UIArraySelect';
import UIArrayValue from './UIArrayValue';
import UIColor from './UIColor';
import UIValue from './UIValue';
import Chart from '../chart/chart';

import Mint from 'mint-ui';
Vue.use(Mint);

export default {
  name: 'EditOption',
  components: {
    FoldCard,
    UIOption,
    UILimit,
    UIArraySelect,
    UIArrayValue,
    UIColor,
    UIValue
    // 'Photoshop': Photoshop
    // 'sketch-picker': Sketch,
    // 'Sketch': Sketch
    // sketch-picker
  },
  data () {
    return {
      current: { id: '' },
      style: [{'name': 'test'}],
      option: {},
      testv: 32
    }
  },
  mounted: function () {
    this.current = Chart.current;
    this.init();
  },
  methods: {
    handleChange: function (c, value) {
      c.parent[c.name] = value;
    },
    test: function () {
      console.log(Chart.instances);
      console.log(this.current.id);
    },
    init: function () {
      if (!(this.current.id in Chart.instances)) {
        this.style = [];
        return;
      }
      this.style = Chart.instances[this.current.id].style;
      this.option = Chart.instances[this.current.id].option;
    }
  },
  watch: {
    'current.id': function () {
      this.init();
    },
    'option': {
      handler: function () {
        console.log(123);
        Chart.update(this.current.id);
      },
      deep: true
    }
  },
  computed: {
    handle: function () {

    }
  }
}

</script>

<style scoped>
  .title { font-size: 14px; color:rgba(0, 0, 0, 0.65); vertical-align: middle; padding-left:10px; padding-right:5px }
  .W100 { width: 100% }
  .txt { height: 25px; font-size: 14px; color: #666 }
  .item { margin: 5px 0px }
  .select { padding: 1px .75rem; font-size: 14px; height: 30px!important; }
  .split { height: 10px; width: 100%; border-bottom: 1px dotted #eee; margin-bottom: 20px  }
  .black { color: #000 }
  .mt-range div { font-size: 14px; }

</style>
